<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Go Out Planner</title>
    <!--CSS file (default YUI Sam Skin) -->
    <link rel="stylesheet" type="text/css" href="yui/build/calendar/assets/skins/sam/calendar.css">
    <link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css"/>
    <link rel="stylesheet" type="text/css" href="yui/build/container/assets/skins/sam/container.css"/>

    <!-- Dependencies -->
    <script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>

    <!-- Source file -->
    <script type="text/javascript" src="yui/build/calendar/calendar-min.js"></script>
    <script type="text/javascript" src="yui/build/container/container-min.js"></script>
    <script type='text/javascript' src='/Web/dwr/engine.js'></script>
    <script type='text/javascript' src='/Web/dwr/util.js'></script>
    <script type='text/javascript' src='/Web/dwr/interface/Server.js'></script>

</head>
<body class="yui-skin-sam">
<center><h1>Make a plan to go out!</h1>

    <h2>We will help you find the perfect date plan in 4 easy steps:</h2>
    <table>
        <tr>
            <td valign="top" align="right">1. Select a date:</td>
            <td id="dateString" valign="top">
            </td>
            <td valign="top">
                <button type="button" id="show" title="Show Calendar"><img src="icons/calbtn.gif" width="18" height="18"
                                                                           alt="Calendar">
                </button>
                <span id="calContainer"></span>
            </td>
        </tr>
        <tr id="restaurantRow" style="visibility:hidden;">
            <td align="right">2. Select a restaurant type:</td>
            <td>
                <select id="restaurantTypeSelect">
                    <option></option>
                </select>
            </td>
            <td>And the desired reservation time:</td>
            <td align="left">
                <select id="restaurantTimeSelect">
                    <option></option>
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                </select></td>
        </tr>
        <tr id="moviesRow" style="visibility:hidden;">
            <td align="right">3. Select a Movie you would like to see:</td>
            <td>
                <select id="moviesSelect">
                    <option></option>
                </select>
            </td>
            <td>
                How many tickets (1=Default)? <input id="ticketCount" maxlength="3">
            </td>
            <td>

            </td>
        </tr>
        <tr id="reservationRow" style="visibility:hidden;">
            <td align="right">4. Make the reservation in name of:</td>
            <td><input id="reservationName"></td>
            <td colspan="2">
                <img id="correctPic" src="icons/correct.gif" alt="Correct" style="visibility:hidden;">
                <img id="inUsePic" src="icons/error.png" alt="In Use" style="visibility:hidden;">
                <span id="reservationMsg"></span>
            </td>
        </tr>
        <tr>
            <td colspan="4" align="center">
                <input id="resetButton" type="button" value="Reset">
                <input id="submitButton" type="button" value="Submit" disabled></td>
        </tr>
        <tr id="resultsRow" style="visibility:hidden;">
            <td id="resultsContainer" colspan="4" align="center">
            </td>
        </tr>
    </table>
</center>
<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function() {
        var dateStringDiv = YAHOO.util.Dom.get("dateString");
        var restaurantRow = YAHOO.util.Dom.get("restaurantRow");
        var moviesRow = YAHOO.util.Dom.get("moviesRow");
        var restaurantTypeSelect = YAHOO.util.Dom.get("restaurantTypeSelect");
        var restaurantTimeSelect = YAHOO.util.Dom.get("restaurantTimeSelect");
        var reservationNameRow = YAHOO.util.Dom.get("reservationRow");
        var moviesSelect = YAHOO.util.Dom.get("moviesSelect");
        var reservationNameInput = YAHOO.util.Dom.get("reservationName");
        var correcImg = YAHOO.util.Dom.get("correctPic");
        var inUseImg = YAHOO.util.Dom.get("inUsePic");
        var reservationMsg = YAHOO.util.Dom.get("reservationMsg");
        var submitButton = YAHOO.util.Dom.get("submitButton");
        var pleaseWaitPanel;
        var resultsRow = YAHOO.util.Dom.get("resultsRow");
        var resultsContainer = YAHOO.util.Dom.get("resultsContainer");
        var ticketCount = YAHOO.util.Dom.get("ticketCount");
        /*******************************************Date field***********************************************/
        var cal = new YAHOO.widget.Calendar("cal", "calContainer", { title:"Choose a date:", close:true,navigator :true, mindate: new Date()});
        cal.render();
        cal.hide();
        var isShowing = false;
        var onCalClick = function() {
            if (isShowing) {
                cal.hide();
                isShowing = false;
            } else {
                cal.show();
                isShowing = true;
            }
        };
        YAHOO.util.Event.addListener("show", "click", onCalClick, cal, true);
        cal.hideEvent.subscribe(function() {
            isShowing = false;
        });

        cal.selectEvent.subscribe(function() {
            cal.hide();
            var date = cal.getSelectedDates()[0];
            dateStringDiv.innerHTML = date.toDateString();
            restaurantRow.style.visibility = "visible";
        });
        /*****************************************Restaurant type field*************************************************/
        Server.getRestaurantTypes(function(res) {
            if (res.success) {
                dwr.util.addOptions("restaurantTypeSelect", res.value);
            }
        });
        var onRestTypeTimeChange = function(ev) {
            if (restaurantTypeSelect.value == "" || restaurantTimeSelect.value == "") {
                moviesRow.style.visibility = "hidden";
                reservationNameRow.style.visibility = "hidden";
                correcImg.style.visibility = "hidden";
                inUseImg.style.visibility = "hidden";
            } else {
                moviesRow.style.visibility = "visible";
                if (moviesSelect.value != "") {
                    reservationNameRow.style.visibility = "visible";
                }
            }
        };
        YAHOO.util.Event.addListener("restaurantTypeSelect", "change", onRestTypeTimeChange);
        YAHOO.util.Event.addListener("restaurantTimeSelect", "change", onRestTypeTimeChange);
        /*****************************************Movies field*************************************************/
        Server.getMovies(function(res) {
            if (res.success) {
                dwr.util.addOptions("moviesSelect", res.value);
            }
        });
        var onMovieChange = function() {
            if (moviesSelect.value == "") {
                reservationNameRow.style.visibility = "hidden";
                correcImg.style.visibility = "hidden";
                inUseImg.style.visibility = "hidden";
            } else {
                reservationNameRow.style.visibility = "visible";
            }
        };
        YAHOO.util.Event.addListener("moviesSelect", "change", onMovieChange)
        /******************************************************************************************/

        var doServerCheck = function() {
            var reservationNameValue = YAHOO.lang.trim(reservationNameInput.value);
            if (reservationNameValue == "") {
                correcImg.style.visibility = "hidden";
                inUseImg.style.visibility = "hidden";
                reservationMsg.innerHTML = "";
                return;
            }
            Server.allreadyResgistered(reservationNameValue, cal.getSelectedDates()[0], function(res) {
                if (res.success) {
                    var isInUse = res.value;
                    if (isInUse) {
                        correcImg.style.visibility = "hidden";
                        inUseImg.style.visibility = "visible";
                        reservationMsg.innerHTML = "That reservation name is already in use.";
                    } else {
                        correcImg.style.visibility = "visible";
                        inUseImg.style.visibility = "hidden";
                        reservationMsg.innerHTML = "";
                        submitButton.disabled = false;
                    }
                }
            });
        };
        var oLater;
        var onKeyDown = function(ev, params) {
            submitButton.disabled = true;
            if (!YAHOO.lang.isUndefined(oLater)) {
                oLater.cancel();
            }
            oLater = YAHOO.lang.later(500, reservationNameInput, doServerCheck);
        };
        YAHOO.util.Event.addListener("reservationName", "keydown", onKeyDown);
        /********************************reset functions*********************************/
        var resetForm = function() {
            dateStringDiv.innerHTML = "";
            cal.deselectAll();
            cal.render();
            restaurantRow.style.visibility = "hidden";
            moviesRow.style.visibility = "hidden";
            restaurantTypeSelect.selectedIndex = 0;
            restaurantTimeSelect.selectedIndex = 0;
            reservationNameRow.style.visibility = "hidden";
            moviesSelect.selectedIndex = 0;
            reservationNameInput.value = "";
            correcImg.style.visibility = "hidden";
            inUseImg.style.visibility = "hidden";
            reservationMsg.innerHTML = "";
            ticketCount.value = "";
            submitButton.disabled = true;
        };
        YAHOO.util.Event.addListener("resetButton", "click", resetForm);
        var canceledKeyCodes = [9,16,32,46,59,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,106,107,109,110,111,188,190,191,192,219,220,221,222,226];
        var blockEventHandler = function(ev, args) {
            YAHOO.util.Event.stopEvent(args[1]);
        };
        var kl1 = new YAHOO.util.KeyListener(ticketCount, { keys: canceledKeyCodes}, { fn:blockEventHandler});
        kl1.enable();
        var doSubmit = function() {
            if (!pleaseWaitPanel) {
                pleaseWaitPanel = new YAHOO.widget.Panel("wait", {
                    width: "500px",
                    height:"200px",
                    fixedcenter: true,
                    close: false,
                    draggable: false,
                    zindex:4,
                    modal: true,
                    visible: false
                });
                pleaseWaitPanel.setHeader("Submitting form, please wait...");
                pleaseWaitPanel.setBody("<img src=\"rel_interstitial_loading.gif\"/>");
                pleaseWaitPanel.render(document.body);
            }

            pleaseWaitPanel.show();

            var reservationPlan = {};
            reservationPlan.reservationName = YAHOO.lang.trim(reservationNameInput.value);
            reservationPlan.date = cal.getSelectedDates()[0];
            reservationPlan.restaurantType = restaurantTypeSelect.value;
            reservationPlan.time = parseInt(restaurantTimeSelect.value, 10);
            reservationPlan.movieName = moviesSelect.value;
            var ticketCountValue = YAHOO.lang.trim(ticketCount.value);
            if(ticketCountValue!=""){
                ticketCountValue = parseInt(ticketCountValue,10);
                if(isNaN(ticketCountValue)){
                    pleaseWaitPanel.setBody("<table><tr><td>You must input a valid number of tickets!</td></tr><tr><td><input id=\"pwpOKButton\" type=\"button\" value=\"OK\"></td></tr></table>");
                    pleaseWaitPanel.setHeader("Result");
                    var dismissPanel = function() {
                        pleaseWaitPanel.hide();
                        pleaseWaitPanel.setHeader("Submitting form, please wait...");
                        pleaseWaitPanel.setBody("<img src=\"icons/rel_interstitial_loading.gif\"/>");
                    };
                    YAHOO.util.Event.addListener("pwpOKButton", "click", dismissPanel);
                    return;
                }
            }else{
                ticketCountValue = 1;
            }
            reservationPlan.ticketCount = ""+ticketCountValue;

            Server.reserve(reservationPlan, function(res) {
                if (res.success) {
                    var result = res.value;
                    var msgString = ""+result.msg;
                    var msgArr = msgString.split("\n");
                    msgString = "";
                    for(var i=0;i<msgArr.length;i++){
                        msgString+=msgArr[i]+"<br />";
                    }
                    pleaseWaitPanel.setBody("<table><tr><td>" + msgString + "</td></tr><tr><td><input id=\"pwpOKButton\" type=\"button\" value=\"OK\"></td></tr></table>");
                    pleaseWaitPanel.setHeader("Result");
                    var dismissPanel = function() {
                        pleaseWaitPanel.hide();
                        pleaseWaitPanel.setHeader("Submitting form, please wait...");
                        pleaseWaitPanel.setBody("<img src=\"icons/rel_interstitial_loading.gif\"/>");
                    };
                    YAHOO.util.Event.addListener("pwpOKButton", "click", dismissPanel);
                }
            });
        };
        YAHOO.util.Event.addListener("submitButton", "click", doSubmit);
        resetForm();
    });
</script>
</body>
</html>